<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
          <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="项目编码">
            <el-input v-model="form.projectId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="form.projectName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="form.customerName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="售前合同编号">
            <el-input v-model="form.preContractId" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="签约金额-含税">
            <el-input v-model="form.signMoneyTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="签约金额-不含税">
            <el-input v-model="form.signMoneyNoTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同签约年限">
            <el-input v-model="form.contractSignYear" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="区域">
            <el-select v-model="form.area" filterable placeholder="请选择">
              <el-option
                v-for="item in dict.ict_project_attributive"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="办事处/组">
            <el-input v-model="form.office" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="项目经理">
            <el-input v-model="form.projectManager" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="客户经理">
            <el-input v-model="form.customerManager" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="签约时间">
            <el-date-picker v-model="form.signTime" type="datetime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="签约金额指标完成时间">
            <el-input v-model="form.signMoneyTargetFinishTime" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="签约项目主要应用类型">
            <el-input v-model="form.projectAppType" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-IT部分-ICT（含税）">
            <el-input v-model="form.moneyItIctTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-大数据（含税）">
            <el-input v-model="form.moneyCtBigdataTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-专线（含税）">
            <el-input v-model="form.moneyCtSpecialLineTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-物联网（含税）">
            <el-input v-model="form.moneyCtContentUnionTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-IDC/VDC（含税）">
            <el-input v-model="form.moneyCtIdcVdcTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-视频云（含税）">
            <el-input v-model="form.moneyCtVideoCloudTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-和对讲（含税）">
            <el-input v-model="form.moneyCtTalkbackTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-集团代付（含税）">
            <el-input v-model="form.moneyCtGroupPayTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-短彩（含税）">
            <el-input v-model="form.moneyCtNoteTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-电子券（含税）">
            <el-input v-model="form.moneyCtECouponsTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-4G后视镜（含税）">
            <el-input v-model="form.moneyCt4gRearviewMirrorTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="合同产品构成金额-CT部分-其他CT（含税）">
            <el-input v-model="form.moneyCtOtherTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="项目整体利润率">
            <el-input v-model="form.entireProfit" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="IT部分利润率">
            <el-input v-model="form.itProfit" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="项目等级">
            <el-input v-model="form.projectLevel" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="IT收入收款条件分类">
            <el-input v-model="form.itIncomeType" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="IT应收金额">
            <el-input v-model="form.itMoney" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="IT已出账金额（不含税）">
            <el-input v-model="form.itOutcomeTax" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="IT未出账金额">
            <el-input v-model="form.itNoOutcome" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" border height="550" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="columns.visible('projectId')" prop="projectId" label="项目编码" />
        <el-table-column v-if="columns.visible('projectName')" prop="projectName" label="项目名称" />
        <el-table-column v-if="columns.visible('customerName')" prop="customerName" label="客户名称" />
        <el-table-column v-if="columns.visible('preContractId')" prop="preContractId" label="售前合同编号" />
        <el-table-column v-if="columns.visible('signMoneyTax')" prop="signMoneyTax" label="签约金额-含税" />
        <el-table-column v-if="columns.visible('signMoneyNoTax')" prop="signMoneyNoTax" label="签约金额-不含税" />
        <el-table-column v-if="columns.visible('contractSignYear')" prop="contractSignYear" label="合同签约年限" />
        <el-table-column v-if="columns.visible('area')" prop="area" label="区域">
          <template slot-scope="scope">
            {{ dict.label.ict_project_attributive[scope.row.area] }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('office')" prop="office" label="办事处/组" />
        <el-table-column v-if="columns.visible('projectManager')" prop="projectManager" label="项目经理" />
        <el-table-column v-if="columns.visible('customerManager')" prop="customerManager" label="客户经理" />
        <el-table-column v-if="columns.visible('signTime')" prop="signTime" label="签约时间" />
        <el-table-column v-if="columns.visible('signMoneyTargetFinishTime')" prop="signMoneyTargetFinishTime" label="签约金额指标完成时间" />
        <el-table-column v-if="columns.visible('projectAppType')" prop="projectAppType" label="签约项目主要应用类型" />
        <el-table-column v-if="columns.visible('moneyItIctTax')" prop="moneyItIctTax" label="合同产品构成金额-IT部分-ICT（含税）" />
        <el-table-column v-if="columns.visible('moneyCtBigdataTax')" prop="moneyCtBigdataTax" label="合同产品构成金额-CT部分-大数据（含税）" />
        <el-table-column v-if="columns.visible('moneyCtSpecialLineTax')" prop="moneyCtSpecialLineTax" label="合同产品构成金额-CT部分-专线（含税）" />
        <el-table-column v-if="columns.visible('moneyCtContentUnionTax')" prop="moneyCtContentUnionTax" label="合同产品构成金额-CT部分-物联网（含税）" />
        <el-table-column v-if="columns.visible('moneyCtIdcVdcTax')" prop="moneyCtIdcVdcTax" label="合同产品构成金额-CT部分-IDC/VDC（含税）" />
        <el-table-column v-if="columns.visible('moneyCtVideoCloudTax')" prop="moneyCtVideoCloudTax" label="合同产品构成金额-CT部分-视频云（含税）" />
        <el-table-column v-if="columns.visible('moneyCtTalkbackTax')" prop="moneyCtTalkbackTax" label="合同产品构成金额-CT部分-和对讲（含税）" />
        <el-table-column v-if="columns.visible('moneyCtGroupPayTax')" prop="moneyCtGroupPayTax" label="合同产品构成金额-CT部分-集团代付（含税）" />
        <el-table-column v-if="columns.visible('moneyCtNoteTax')" prop="moneyCtNoteTax" label="合同产品构成金额-CT部分-短彩（含税）" />
        <el-table-column v-if="columns.visible('moneyCtECouponsTax')" prop="moneyCtECouponsTax" label="合同产品构成金额-CT部分-电子券（含税）" />
        <el-table-column v-if="columns.visible('moneyCt4gRearviewMirrorTax')" prop="moneyCt4gRearviewMirrorTax" label="合同产品构成金额-CT部分-4G后视镜（含税）" />
        <el-table-column v-if="columns.visible('moneyCtOtherTax')" prop="moneyCtOtherTax" label="合同产品构成金额-CT部分-其他CT（含税）" />
        <el-table-column v-if="columns.visible('entireProfit')" prop="entireProfit" label="项目整体利润率" />
        <el-table-column v-if="columns.visible('itProfit')" prop="itProfit" label="IT部分利润率" />
        <el-table-column v-if="columns.visible('projectLevel')" prop="projectLevel" label="项目等级" />
        <el-table-column v-if="columns.visible('itIncomeType')" prop="itIncomeType" label="IT收入收款条件分类" />
        <el-table-column v-if="columns.visible('itMoney')" prop="itMoney" label="IT应收金额" />
        <el-table-column v-if="columns.visible('itOutcomeTax')" prop="itOutcomeTax" label="IT已出账金额（不含税）" />
        <el-table-column v-if="columns.visible('itNoOutcome')" prop="itNoOutcome" label="IT未出账金额" />
        <el-table-column v-permission="['admin','ictIncomeBase:edit','ictIncomeBase:del']" fixed="right" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudIctIncomeBase from '@/api/ict/ictIncomeBase/ictIncomeBase'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '入账基础信息管理', url: 'api/ictIncomeBase', sort: 'id,desc', crudMethod: { ...crudIctIncomeBase }})
const defaultForm = { id: null, projectId: null, projectName: null, customerName: null, preContractId: null, signMoneyTax: null, signMoneyNoTax: null, contractSignYear: null, area: null, office: null, projectManager: null, customerManager: null, signTime: null, signMoneyTargetFinishTime: null, projectAppType: null, moneyItIctTax: null, moneyCtBigdataTax: null, moneyCtSpecialLineTax: null, moneyCtContentUnionTax: null, moneyCtIdcVdcTax: null, moneyCtVideoCloudTax: null, moneyCtTalkbackTax: null, moneyCtGroupPayTax: null, moneyCtNoteTax: null, moneyCtECouponsTax: null, moneyCt4gRearviewMirrorTax: null, moneyCtOtherTax: null, entireProfit: null, itProfit: null, projectLevel: null, itIncomeType: null, itMoney: null, itOutcomeTax: null, itNoOutcome: null, delFlag: null, updateTime: null, createName: null }
export default {
  name: 'IctIncomeBase',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['ict_project_attributive'],
  data() {
    return {
      permission: {
        add: ['admin', 'ictManager', 'ictIncomeBase:add'],
        edit: ['admin', 'ictManager', 'ictIncomeBase:edit'],
        del: ['admin', 'ictManager', 'ictIncomeBase:del']
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'projectId', display_name: '项目编码' },
        { key: 'projectName', display_name: '项目名称' }
      ]
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      const query = this.query
      if (query.type && query.value) {
        this.crud.params[query.type] = query.value
      }
      return true
    }
  }
}
</script>

<style scoped>

</style>
